<template>
  <div class="product">
    <product-header :seller="seller"></product-header>
    <product-tab></product-tab>
    <div class="goods">
      <transition mode='out-in'>
        <router-view></router-view>
      </transition>
    </div>
    <div class="footer">
      <all-count :seller='seller'></all-count>
    </div>
  </div>
</template>

<script>
import ProductHeader from './components/Header'
import ProductTab from './components/Tab'
import AllCount from './components/AllCount'
// 导入axios 进行异步获取数据
import axios from 'axios'

export default {
  name: 'Product',
  data () {
    return {
      seller: '',
      ratings: ''
    }
  },
  methods: {
    getSellerInfo () {
      // 获取seller数据
      axios.get('/api/seller').then((response) => {
        if (response.data.erron === 0) {
          this.seller = response.data.data
        }
      })
    },
    getRatingsInfo () {
      // 获取ratings数据
      axios.get('/api/ratings').then((response) => {
        if (response.data.erron === 0) {
          this.ratings = response.data.data
        }
      })
    }
  },
  mounted () {
    this.getSellerInfo()
    this.getRatingsInfo()
  },
  components: {
    ProductHeader,
    ProductTab,
    AllCount
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
// 动画效果
.mode{
    transition: all 0.8s ease;
}
.v-enter,
.v-leave-to{
    opacity: 0;
    transform: translateX(100%);
}
.v-enter-active,
.v-leave-active{
    transition: all 0.8s ease;
}

.product{
  height 100%
  display flex
  overflow hidden
  flex-direction column
  .goods{
    position absolute
    top 3.48rem
    bottom .96rem
    left 0
    right 0
  }
  .footer{
    position absolute
    bottom 0
    left 0
    right 0
    z-index 50
  }
}
</style>
